<template>
  <div class="evaluate">
    <el-main>
      <ul>
        <li v-for="evaluate in evaluates" :key="evaluate">
          <span>评论时间：{{evaluates.evaluateTime}}</span>
          <span>评论等级：{{evaluates.grade}}</span>
          <hr />
          <p>评论内容:{{evaluates.content}}</p>
          <p>回复：{{replyevals.replycontent}}</p>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
          <el-button type="primary" @click="replyeval(input)">回复</el-button>
        </li>
      </ul>
    </el-main>
  </div>
</template>
<style scoped>
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 10px;
  width: 60%;
  margin: 0 auto;
}
ul {
  width: 100%;
}
li {
  width: 100%;
  height: 150px;
  list-style: none;
}
span {
  margin-left: 20px;
}
.el-input {
  width: 500px;
}
</style>
<script>
export default {
  data() {
    return {
      tradeID: this.$route.params.tradeID,
      evaluates: [],
      replyevals:[],
      input: ""
    };
  },
  created() {
    this.$axios
      .get("http://localhost:3000/evaluate/Oneevaluate?tradeID=" +this.tradeID)
      .then(res => {
        console.log("evaluate", res.data.data[0]);
        this.evaluates = res.data.data[0];
      })
      .catch(err => {
        console.log("查询出错".err);
      });
  },
  methods: {
    replyeval(input) {
      console.log("input",input)
      let evaluateID = this.evaluates.evaluateID;
      this.$axios
        .post("http://localhost:3000/evaluate/backEvaluate?", {
          evaluateID: evaluateID,
          replycontent:input
        })
        .then(res => {
          console.log("添加成功",res.data.data.replycontent);
          if(res.data.data.length == 1){
            this.$axios.get("http://localhost:3000/evaluate/selbackEvaluate?evaluateID="+evaluateID)
            .then(res => {
              this.replyevals = res.data.data[0]
            })
            .catch(err => {
              console.log("查询失败",err)
            })
          }
        })
        .catch(err => {
          console.log("添加失败", err);
        });
    }
  }
};
</script>

